<template>
    <el-dialog class="ui-create-account-dialog ui-dark-dialog" v-model="dialogVisible" :title="dialogTitle" ref="dialog" @closed="finalThings">
        <el-form ref="elForm" :model="form" :rules="rules" label-width="90px" size="default" :autocomplete="autocomplete">
            <el-tabs>
                <el-tab-pane label="账户信息">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="登录名:" prop="username">
                                <el-input name="username" :disabled="isupdate" v-model="form.username" :autocomplete="autocomplete" readonly onfocus="this.removeAttribute('readonly');"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="真实姓名:" prop="realname">
                                <el-input name="realname" v-model="form.realname" :autocomplete="autocomplete"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="角色:" prop="role_id">
                                <el-radio-group v-model.number="form.role_id" :disabled="role_id != 1 || form.id == user_id || form.role_id ==1">
                                    <el-radio :label="1" v-if="(form.id == user_id && role_id==1) || form.role_id ==1">老板</el-radio>
                                    <el-radio :label="2" v-if="!(form.id == user_id && role_id==1) && form.role_id !==1">店长</el-radio>
                                    <el-radio :label="3" v-if="!(form.id == user_id && role_id==1) && form.role_id !==1">收银员</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="账户状态:" prop="frozen">
                                <el-radio-group v-model.number="form.frozen" :disabled="user_id == form.id">
                                    <el-radio :label="0">启用</el-radio>
                                    <el-radio :label="1">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="联系电话:" prop="tel">
                                <el-input name="tel" v-model="form.tel" :autocomplete="autocomplete"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="密码:" prop="password">
                                <el-input name="password" v-model="form.password" type="password" :autocomplete="autocomplete" readonly onfocus="this.removeAttribute('readonly');"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="重复密码:" prop="repassword">
                                <el-input name="repassword" v-model="form.repassword" type="password" :autocomplete="autocomplete" readonly onfocus="this.removeAttribute('readonly');"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="权限配置">
                    
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <template #footer>
            <div class="box-row">
                <div style="flex:1"></div>
                <el-button size="default" type="primary" @click="onSure">{{isupdate?'确认修改':'添加账户'}}</el-button>
                <el-button size="default" type="danger" @click="onCancel">取消(Esc)</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { computed, reactive, toRefs } from 'vue'
import { unique,repasswordValidator } from '../../../uiframe/validator'
import { ElMessage } from 'element-plus';
import axios from 'axios';

export default {
    components:{
    },
    props:{
        q:Object,
        _compId:Number,
        done: Function,
        role_id:Number,
        user_id:Number,
        user:{
            type:Object,
            default:{
                username:'',
                realname:'',
                tel:'',
                password:'',
                repassword:'',
                role_id: 3,
                frozen:0,
            }
        }
    },
    setup(props)
    {
        let {user_id, role_id} = props, isnew = !props.user.hasOwnProperty('id');
        //-- 店长只能添加营业员.
        if(isnew  && props.role_id == 2) {
            props.user.role_id = 3;
        }
        
        let user = {}
        for(var k in props.user.roles ?? {}){
            user[ 'roles_' + k ] = props.user.roles[ k ]
        }
        for(var k in props.user){
            user[ k ] = props.user[ k ]
        }
        delete user['roles'];
        
        let data = reactive({
            dialogVisible: true,
            dialogTitle: isnew ? '添加收银员账户' : '编辑账户',
            elForm:null,
            role_id:role_id,
            /*form: Object.assign({
                roles_decmoney: false,
                roles_refund: false,
                roles_delmember: false,
                roles_memberlevel: false,
                roles_goodsrefund:false,
                roles_no_confirm:props.user.role_id == 1
            }, user),*/
            form:user,
            isupdate: !isnew,
            rules:{
                username:[
                    {required:true,message:'登录名必填',trigger:'blur' },
                    {validator:unique, type:'wanjia.username',url:'/accounts/unique', id:props.user?.id, trigger:'blur'},
                ],
                realname:[
                    {required:true,message:'真实姓名必填',trigger:'blur'},
                ],
                tel:[
                    {required:true,message:'电话号码必填',trigger:'blur'},
                ],
                role_id:[
                    {required:true,message:'角色必选',trigger:'blur'},
                ],
                frozen:[
                    {required:true,message:'电话号码必填',trigger:'blur'},
                ],
                password:[
                    {required:isnew,message:'密码必填',trigger:'blur'},
                ],
                repassword:[
                    {required:isnew,message:'重复密码必填',trigger:'blur'},
                    {trigger:'blur', validator: repasswordValidator, compareTo:computed(()=>data.form.password)}
                ]
            },
        });
        
        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) }

        const onSure = ()=>{
            data.elForm.validate().then(ret => {
                if(!ret) return;
                axios.post('/accounts/create', data.form).then(({status,data:res})=>{
                    onmessage(res)
                    if(res.success){
                        data.dialogVisible = false;
                        props.q.resolve({success:true,message: isnew ? '添加成功.':'修改成功.'});
                    }
                }).catch(onfailure);
            }).catch(res=>{
                
            })
        }

        const onCancel = ()=>data.dialogVisible = false;
        const finalThings = () =>props.done(props._compId);

        return {
            ...toRefs(data),
            autocomplete: 'new-password',
            onSure,onCancel,finalThings
        }
    }
}
</script>
<style lang="scss">
.ui-create-account-dialog {
    width:36rem;max-width: 36rem;min-width: 36rem;
    .el-dialog__body{
        padding: 0 1rem .5rem 1rem;
    }
}
</style>
